<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 400px;
        }
    </style>
</head>

<body>
    <!-- 音频 -->
    <!-- <audio src=""></audio> -->
    <!-- 视频 -->
    <video src="./herocute.mp4" controls></video>
    <button id="start">开始</button>
    <button id="stop">暂停</button>

    <script>
        let video = document.getElementsByTagName("video")[0];
        let start=document.getElementById("start");
        let stop=document.getElementById("stop");
        // 1.静音：true表示开启静音，false表示关闭静音
        // video.muted=true;
        // 2.自动缓冲：true表示开始，false表示关闭
        // video.autobuffer=true;
        // 3.自动播放:true表示开始，false表示关闭
        // 注意：必须先静音，才能自动播放
        // video.autoplay=true;
        // 4.循环播放:true表示开始，false表示关闭
        // video.loop=true;
        // 5.视频封面
        // video.poster="图片地址";
        // 6.音量:取值为0-1之间，0表示静音，1表示声音全开
        // video.volume = 0.3;
        // 7.多媒体播放时间
        // console.log(video.currentTime);
        // setInterval(function () {
        //     console.log(video.currentTime);
        // }, 1000);
        // video.currentTime=10;//单位是秒，可以用于修改播放时间
        // 8.倍数播放
        // video.playbackRate=2;//2倍数
        // video.playbackRate=0.2;//0.2倍数
        // video.playbackRate=1;//原本速度
        // 9.总播放时长：必须在视频或音频加载完毕之后，才能看到总时长，否则就是NaN
        // window.onload=function(){
        //     console.log(video.duration);//63秒
        // }


        // 多媒体元素相关事件
        // 1.play事件：播放时触发
        video.onplay=function(){
            console.log("播放");
        }

        // 2.pause事件：暂停播放时触发
        video.onpause=function(){
            console.log("暂停");
        }

        // 3.volumechange事件：调整音量时触发
        video.onvolumechange=function(){
            console.log(video.volume);
        }

        // 4.loadedmetadata事件：多媒体数据被加载是触发
        video.onloadedmetadata=function(){
            console.log(video.duration);
        }

        // 点击按钮播放视频
        start.onclick=function(){
            video.play();//播放
        }

        // 点击按钮暂停视频
        stop.onclick=function(){
            video.pause();//暂停

        }
    </script>

</body>

</html>